<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{arr.length}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected: curType==='all'}" href="javascript:;" @click="changeData('all')" >全部</a>
      </li>
      <li>
        <a :class="{selected: curType==='no'}" href="javascript:;" @click="changeData('no')">未完成</a>
      </li>
      <li>
        <a :class="{selected: curType==='yes'}" href="javascript:;" @click="changeData('yes')" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearData" >清除已完成</button>
  </footer>
</template>

<script>
/***
 * 需求1：点谁 给谁边框
 * 1、需要知道用户点击了哪个按钮（可以给按钮一个标识符，点击按钮的时候把他们的标识符保存起来，然后就可用过这个标识符知道点了谁）
 *  全部：all, 未完成：no ， 已完成：yes
 * 2、根据标识符动态设置selected类名即可
 * 
 * 需求2：对应切换不同数据显示
 * 1、子传父，在父组件中实现数据筛选，把curType传递给父组件用于判断筛选什么数据
 * 2、父组件，绑定自定义事件，并在事件处理函数中保存curType的值，因为将来筛选数据的时候要用到
 * 3、父组件，利用计算属性来实现筛选当前显示的数据，声明计算属性showArr表示将来需要显示在页面上的筛选出来的数组
 * 4、父组件，在计算属性中根据curType筛选数据返回结果，然后修改所有传递子组件数组为showArr。
 * 
 * 
 * */ 
export default {
  props: ["arr"],
  data(){
    return {
      curType: "all"
    }
  },
  methods:{
    changeData(type){
      this.curType = type;
      // 子传父
      this.$emit("sendData", this.curType)
    },
    clearData(){
      this.$emit("clearData")
    }
  }
}
</script>